<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-data-header</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>data-header 表头</h2>
				<p>数据表格表头操作：刷新、添加、删除、下拉框、输入框、按钮等等</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
				</div>
				<div class="content">
					<div class="qx-header">
						<div class="left">
							<div class="page-title">卡券列表</div>
							<qx-form>
								<qx-form-item label="发送类别：" prop="input">
									<qx-select placeholder="请选择" size="mini" name="type">
										<qx-option label="代金券" value="0"></qx-option>
										<qx-option label="折扣券" value="1"></qx-option>
									</qx-select>
								</qx-form-item>
								<qx-form-item label="状态：" prop="input">
									<qx-select placeholder="请选择" size="mini" name="status">
										<qx-option label="平台券" value="0"></qx-option>
										<qx-option label="微信券" value="1"></qx-option>
									</qx-select>
								</qx-form-item>
							</qx-form>
						</div>
						<div class="right">
							<qx-button type="primary" class="add" icon="icon-remove" size="mini">添加</qx-button>
							<qx-button type="warning" class="remove" icon="icon-add" size="mini">删除</qx-button>
							<qx-button type="warning" class="refresh" icon="icon-refresh" size="mini">
								刷新
							</qx-button>
						</div>
					</div>
					<div class="qx-header">
						<div class="left">
							<div class="page-title">标签分类</div>
							<qx-form>
								<qx-form-item prop="input">
									<qx-input
										name="tags"
										name="keyword"
										placeholder="请输入标签分类名"
										size="mini"
									></qx-input>
									<qx-button type="warning" icon="icon-seekicon" size="mini"></qx-button>
								</qx-form-item>
							</qx-form>
						</div>
						<div class="right">
							<qx-button type="primary" class="add" icon="icon-remove" size="mini">添加</qx-button>
							<qx-button type="warning" class="remove" icon="icon-add" size="mini">删除</qx-button>
							<qx-button type="warning" class="refresh" icon="icon-refresh" size="mini">
								刷新
							</qx-button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			// Base 类
			var base = new Base()

			var header = $('.qx-header').eq(0)
			var header2 = $('.qx-header').eq(1)
			$(header)
				.find('.add')
				.on('click', function () {
					var type = $(header).find('input[name=type]').val()
					var status = $(header).find('input[name=status]').val()
					if (!type) {
						base.tips({
							type: 'error',
							msg: '发送类别不能为空'
						})
						return
					}
					if (!status) {
						base.tips({
							type: 'error',
							msg: '状态不能为空'
						})
						return
					}
					base.ajax({
						successMsg: '恭喜您，提交成功！',
						errorMsg: '对不起，提交失败！',
						url: 'upload.php',
						data: {
							type,
							status
						},
						error(res) {
							console.log(res)
						},
						success(res) {
							console.log(res)
						}
					})
				})
			$(header)
				.find('.remove')
				.on('click', function () {
					base.ajax({
						successMsg: '恭喜您，提交成功！',
						errorMsg: '对不起，提交失败！',
						url: 'upload.php',
						data: {},
						error(res) {
							console.log(res)
						},
						success(res) {
							console.log(res)
						}
					})
				})
			$('.qx-header')
				.find('.refresh')
				.on('click', function () {
					window.location.reload()
				})

			// 搜索
			$(header2)
				.find('.left button')
				.on('click', function () {
					var key = $(this).siblings('.qx-input').find('input').val()
					base.ajax({
						successMsg: '恭喜您，搜索成功！',
						url: 'upload.php',
						data: {
							key
						},
						error(res) {
							console.log(res)
						},
						success(res) {
							console.log(res)
						}
					})
				})
		</script>
	</body>
</html>
